<template>
  <div class="recommend">
    <div class="rec1">
      <div class="rec1-1"></div>
      <div class="rec1-2">限时低价</div>
      <div class="rec1-3">
        <div class="rec1-3-1">去抢购</div>
      </div>
    </div>
    <div class="rec2">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <van-grid :column-num="4" :border="false" icon-size="52">
              <van-grid-item
                v-for="value in list1"
                :key="value.name"
                :icon="value.imgprefix + value.imgbase"
              />
            </van-grid>
          </div>
          <div class="swiper-slide">
            <van-grid :column-num="4" :border="false" icon-size="52">
              <van-grid-item
                v-for="value in list2"
                :key="value.name"
                :icon="value.imgprefix + value.imgbase"
              />
            </van-grid>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getFilmList } from '@/api'

// 商品名称
const commodityName = ref<CommodityName[]>([])

const list1 = ref<CommodityName[]>([])
const list2 = ref<CommodityName[]>([])

///请求商品信息
async function onload() {
  const { feeds } = await getFilmList()

  commodityName.value = feeds.content

  list1.value = commodityName.value.slice(0, 4)
  list2.value = commodityName.value.slice(4, 8)
}
onload()
</script>

<style scoped>
.swiper {
  border-radius: 20px;
}
.recommend {
  width: 100%;
  height: 100%;
  background-image: url(https://img11.360buyimg.com/img/jfs/t1/226923/11/7714/45152/65782c91F9d91466d/24928a901f4c3f58.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.rec1 {
  float: left;
  width: calc(22% - 2px);
  height: 100%;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.rec2 {
  float: left;
  width: 78%;
  height: 90px;
  margin-top: 2px;
  margin-right: 2px;
  border-radius: 12px;
  background: #fff;
}
.rec1-1 {
  width: 65px;
  height: 13px;
  background-image: url(https://img30.360buyimg.com/img/jfs/t1/227615/23/8080/1616/65782dd8F605d99af/0d97136b32d5ab1b.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.rec1-2 {
  color: #fff;
  width: 65px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 12px;
  margin-top: 6px;
}
.rec1-3 {
  margin-top: 9px;
  margin-left: -12px;
  border-radius: 0.4rem;
  background: #fff;
  width: 53px;
  height: 16px;
  text-align: center;
  color: #fa2c19;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  box-sizing: border-box;
}
</style>
